<template>
  <div class="tab_home">
    <van-nav-bar
      title="大胎网"
    />
    <div class="home-swipe">
      <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in dataInfo.homeAds" :key="index">
            <!-- <img v-lazy="image.url" ref="img" width="100%"/> -->
            <router-link to="image.link" style="overflow:hidden;display:block;background: #fff;">
            <img :src="image.url" width="100%;"/>
            </router-link>
          </van-swipe-item>
      </van-swipe>
    </div>
    <van-row class="topRow">
        <van-col span="8"><img :src="picImg1">大胎网自营品牌</van-col>
        <van-col span="8"><img :src="picImg2">全国统一价格</van-col>
        <van-col span="8"><img :src="picImg3">售后理赔无忧</van-col>
    </van-row>
    <van-panel style="margin-top: 0; padding: 0 0 10px 0;background: #FF6600;overflow:hidden;">
      <!-- <div slot='header'>
        <van-cell-group>
          <van-cell class="van-cell-color" title="产品专区" icon="bag">
          </van-cell>
        </van-cell-group>
      </div> -->
      <div style="padding: 0 10px;">
        <img style="width: 100%;" :src="background_image" alt="">
      </div>
      <van-row gutter="10" style="padding: 0 10px;">
        <van-col
          v-for="(topic ,index) in dataInfo.homeProduct"
          :key="index"
          span="12"
          @click="goDetail(topic.id)"
          style="background: #fff;padding-bottom:5px;"
        >
          <div style="border: 1px solid red;margin-top: 5px;">
            <img :src="topic.url" style="width: 100%; max-height: 150px;" />
            <div style="width: 100%;font-size:14px;color:#333;"> 
              <div style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ topic.name }}</div>
            </div>
            <div style="font-size:14px;color:#ff6600;display:flex;justify-content:space-between;width:100%;align-items:center;padding-bottom: 10px;">
              <div>￥{{ topic.price }}元</div>
              <!-- <van-button color="#ff6600" size="small">立即购买</van-button> -->
            </div>
          </div>
        </van-col>
        <van-col style="background: #fff;padding:10px 0;text-align:center; border-radius:0 0 10px 10px;" span="24"><router-link to="/goods">查看更多>></router-link></van-col>
      </van-row>
    </van-panel>

    <van-panel style="margin-top: 0;padding-top:10px;">
      <div slot='header'>
        <van-cell-group>
          <van-cell class="van-cell-color" title="新闻资讯" icon="comment"
                    isLink>
            <router-link to="/news"
                         class="text-desc">更多</router-link>
          </van-cell>
        </van-cell-group>
      </div>
      <van-grid clickable class="news-index"
                :column-num="1">
        <van-grid-item v-for="(topic ,index) in dataInfo.homeNews"
                       :key="index"
                       :url="goTopic(topic.id)">
          <van-row gutter="10">
            <van-col span="8">
              <img :src="topic.titleImg"
               style="width: 100%; max-height: 150px;" />
            </van-col>
            <van-col span="16">
              <div style="width: 100%;font-size:14px;color:#333;"> {{ topic.title }}</div>
              <div style="width: 100%;font-size:12px;color:#ccc;"> {{ topic.addTime }}</div>
              <div style="font-size:10px;color:#999;width:100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;"> {{ topic.summary }}</div>
            </van-col>
            <div>
            </div>
          </van-row>
        </van-grid-item>
      </van-grid>
    </van-panel>
    <app-Version/>
  </div>
</template>

<script>
import axios from 'axios';
import appVersion from '@/components/appVersion'
import bg_default from '@/assets/images/index-banner.png';
import pic1 from '@/assets/images/pic1.jpg';
import pic2 from '@/assets/images/pic2.jpg';
import pic3 from '@/assets/images/pic3.jpg';
import { getHome, getHomeAds, getHomePro, getHomeNews, goodsCategory, couponReceive, storeIndex } from '@/api/api';
import scrollFixed from '@/mixin/scroll-fixed';
import { getLocalStorage } from '@/utils/local-storage';
import _ from 'lodash';

import {
  List,
  Swipe,
  SwipeItem,
  Tabbar,
  TabbarItem,
  // Search,
  Panel,
  CouponCell,
  CouponList,
  Toast,
  Card,
  Grid,
  GridItem,
  Row,
  Col,
  Tag,
  NavBar
} from 'vant';

export default {
  mixins: [scrollFixed],

  data() {
    return {
      shopInfos: [],
      background_image: bg_default,
      picImg1: pic1,
      picImg2: pic2,
      picImg3: pic3,
      sessionStore: '',
      dataInfo: {
        'homeAds': '',
        'homeProduct': '',
        'homeNews': ''
      },
      images: [],
      isLoading: false
    };
  },

  mounted() {
    this.initViews();
  },

  methods: {
    goDetail(id) {
      // return `#/items/detail/${id}`;
      this.$router.push(`/items/detail/${id}`);
      
    },
    goBrand(id) {
      return `#/items/brand/${id}`;
    },
    goTopic(id) {
      return `#/art/${id}`;
    },    
    getCoupon(id) {
      couponReceive({ couponId: id }).then(res => {
        Toast.success('领取成功');
      });
    },
    changeTabbar(o) {
      goodsCategory({ id: o.id }).then(res => {
        // console.log(res)
        let categoryId = res.data.data.currentCategory.id;
        this.$router.replace({
          name: 'category',
          query: { itemClass: categoryId }
        });
      });
    },
    initViews() {
      getHomeAds({position: 3}).then(res => {
        if (res.data.errno === 0) {
          this.dataInfo.homeAds = res.data.data
        }
        console.log(res.data.data)
      })
      // console.log(getLocalStorage('storeId').storeId, 'session')
      if (!getLocalStorage('storeId').storeId) {
        // console.log(process.env.VUE_APP_BASE_API+'/wx/store/index')
        axios.get(process.env.VUE_APP_BASE_API+'/wx/store/index').then(res => {
          this.sessionStore = res.data.data.userId
          getHomePro({
            storeId: this.sessionStore,
            count: 4
          }).then(res => {
            // console.log(res, 'bug')
            if (res.data.errno === 0) {
              this.dataInfo.homeProduct = res.data.data.list
            }
          })
        })
      } else {
        this.sessionStore = getLocalStorage('storeId').storeId
          getHomePro({
          storeId: this.sessionStore,
          count: 4
        }).then(res => {
          // console.log(res, 'bug')
          if (res.data.errno === 0) {
            this.dataInfo.homeProduct = res.data.data.list
          }
        })
      }
      // alert(this.sessionStore)
      
      getHomeNews({
        limit: 1,
        type: 1
      }).then(res => {
        console.log(res)
        if (res.data.errno === 0) {
          this.dataInfo.homeNews = res.data.data.list
        }
      })
      getHome().then(res => {
        this.shopInfos = res.data.data;
        console.log(res.data.data)
      });
    }
  },

  components: {
    appVersion,
    [Row.name]: Row,
    [Col.name]: Col,
    [Card.name]: Card,
    [Toast.name]: Toast,
    [CouponCell.name]: CouponCell,
    [CouponList.name]: CouponList,
    // [Search.name]: Search,
    [Panel.name]: Panel,
    [List.name]: List,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Tag.name]: Tag,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [NavBar.name]: NavBar
  }
};
</script>


<style lang="scss" scoped>
.news-index {
  padding: 15px 0;
  /deep/ .van-grid-item__content {
    padding: 2px 8px;
  }
}
.van-cell {
  padding: 0;
}
.topRow {
  background: #fff;
  font-size: 12px;
  padding: 10px 0;
  .van-col {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 25px;
      height: auto;
    }
  }
}
.van-icon {
  color: #ff6600;
  font-size: 21px;
}
.interval_bot {
  margin-bottom: 10px;
}
.van-panel {
  margin-top: 20px;
}
.goods-channel {
  background: #fff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 0px;
  padding-top: 10px;
}

.goods-channel .item {
  width: 50px;
  height: 50px;
  margin-left: 10px;
}

.goods-channel img {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
}

.goods-channel span {
  display: block;
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #333;
}
.van-coupon-cell--selected {
  color: #323233;
}
.van-coupon-list {
  height: 100%;
  position: relative;
  background-color: #f8f8f8;
}
.van-coupon-list__field {
  padding: 7px 15px;
}
.van-coupon-list__exchange {
  height: 32px;
  line-height: 30px;
}
.van-coupon-list__list {
  overflow-y: auto;
  padding: 15px 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.van-coupon-list__close {
  left: 0;
  bottom: 0;
  position: absolute;
  font-weight: 500;
}
.van-coupon-list__empty {
  padding-top: 100px;
  text-align: center;
}
.van-coupon-list__empty p {
  color: #969799;
  margin: 15px 0;
  font-size: 14px;
  line-height: 20px;
}
.van-coupon-list__empty img {
  width: 80px;
  height: 84px;
}
.van-coupon-item {
  overflow: hidden;
  border-radius: 4px;
  margin: 0 15px 15px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.van-coupon-item:active {
  background-color: #e8e8e8;
}
.van-coupon-item__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100px;
  padding: 24px 0 0 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid red;
}
.van-coupon-item h2,
.van-coupon-item p {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.van-coupon-item h2 {
  height: 34px;
  font-weight: 500;
  line-height: 34px;
}
.van-coupon-item p {
  font-size: 12px;
  line-height: 16px;
  color: #969799;
}
.van-coupon-item__head {
  min-width: 90px;
}
.van-coupon-item__head h2 {
  color: #f44;
  font-size: 24px;
}
.van-coupon-item__head h2 span {
  font-size: 50%;
}
.van-coupon-item__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative;
  border-radius: 0 4px 4px 0;
}
.van-coupon-item__body h2 {
  font-size: 16px;
}
.van-coupon-item__corner {
  top: 16px;
  right: 15px;
  position: absolute;
}
.van-coupon-item__corner .van-icon {
  border-color: #f44;
  background-color: #f44;
}
.van-coupon-item__reason {
  padding: 7px 15px;
  border-top: 1px dashed #ebedf0;
  background-color: #fafafa;
}
.van-coupon-item--disabled:active {
  background-color: #fff;
}
.van-coupon-item--disabled .van-coupon-item__content {
  height: 90px;
}
.van-coupon-item--disabled h2,
.van-coupon-item--disabled p,
.van-coupon-item--disabled span {
  color: #969799;
}
</style>
